import React, { useState } from 'react'
import { Radio } from 'antd'
import _ from 'lodash'

const CommonButtonComponents = ({ options, Components }) => {
  const [value, setValue] = useState('AntVLz')
  const Component = Components[value]
  const handlerChange = (e) => {
    setValue(e.target.value)
  }
  return (
    <div>
      <div className="commonButtonComponents-layout">
        <Radio.Group value={value} onChange={handlerChange}>
          {_.map(options, (item, key) => {
            return (
              <Radio.Button
                className="commonButtonComponents-button"
                value={item.id}
                key={item.id}
              >
                {item.label}
              </Radio.Button>
            )
          })}
        </Radio.Group>
      </div>
      {Component && <Component />}
    </div>
  )
}

export default CommonButtonComponents
